<template>
	<div class="swiper-container"  ref="bannerSwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(carousel,index) in list" :key='carousel.id'>
				<img :src="carousel.imgUrl">
			</div>
	
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
	
		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</template>

<script>
	import Swiper from 'swiper'
	export default{
		name:'Carousel',
		props:["list"],
		watch:{
			list:{
				immediate:true,//立即监听一次,然后再次监听
				handler(){
					this.$nextTick(()=>{
						var mySwiper = new Swiper(this.$refs.bannerSwiper, {
							loop: true, // 循环模式选项
						
							// 如果需要分页器
							pagination: {
								el: '.swiper-pagination',
								//点击小球的时候也能切换轮播
								clickable: true
							},
						
							// 如果需要前进后退按钮
							navigation: {
								nextEl: '.swiper-button-next',
								prevEl: '.swiper-button-prev',
							},
						
						
						})
					})
				}
			}
		}
	}
</script>

<style>
</style>
